<template>
  <div class="dizhi">
    <div class="dit">
      <van-nav-bar
        title="地址"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="dim">
      <ul>
        <li v-for="(item,index) in list" :key="index" >
          <div class="zuo">
            <input type="checkbox" @click="xuan(item._id,item.receiver,item.regions,item.regions+item.address)">
          </div>
          <div class="zhong">
            <h6>{{item.regions+item.address}}</h6>
            <!-- <p>{{item._id}}</p> -->
            <p><span>{{item.mobile}}</span> <span>{{item.receiver}}</span></p>
          </div>
          <div class="you">
            <van-icon @click="shan(item._id)" name="close" class="icon1"/>
            <van-icon @click="edit(item._id)" name="edit" class="icon2"/>
          </div>
        </li>
      </ul>
    </div>

    <div class="bottom" @click="onAdd">
      <div class="b">
        <p>+添加地址</p>
      </div>
    </div>
  </div>
</template>

<script>
import { deladdress } from '../api/address'
import { getaddresses } from '../api/address'
export default {
  data() {
    return {
      list:[]
    }
  },
  async created() {
    const res = await getaddresses();
    this.list = res.data.addresses;
    console.log(this.list);
    // this.list.forEach(v=>{
    //   console.log(v);
    // })
  },
  methods:{

    onClickLeft(){
      this.$router.push({name:'Order'});
    },
    onAdd() {
      this.$router.push({name:'Edit'});
    },

    onEdit(item, index) {

    },
    shan(id) {
      console.log(id)
      deladdress(id).then(()=>{
      this.$router.go(0);
      });
    },
    edit(id) {
      this.$router.push({name:'Edit',query:{id}})
      // console.log(this.$route.params,id)
    },
    xuan(id) {
      if(this.list.filter(item=>item.checked)){

        this.$router.push({name:'Order',query:{id}});
      }
    }
  }
}
</script>


<style scoped>
.dizhi{
  width: 100%;
  display: flex;
  flex-direction: column;
  background: ghostwhite;
}
.dit{
  height: 46px;
}
.dim{
  flex: 1;
  overflow:auto;
}
/* .dizhi{
  display: flex;
} */
.dim li{
  display: flex;
  /* justify-content:space-between; */
  padding: 11px 15px;
  border-bottom: solid 1px gainsboro;
  height: 60px;
}
.zhong{
  width: 294px;
  margin-top: 8px;
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zhong p{
  margin: 0;
  font-size: 14px;
  color: grey;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 270px;
}
.zhong h6{
  margin: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 270px;
}
.zuo{
  line-height: 60px;
}
.bottom{
  height: 40px;
  background: white;
  padding: 10px 15px;
}
.icon2{
  margin-top: 15px;
}
.icon1{
  color:red;
}
.b{
  height: 40px;
  background: skyblue;
  border-radius: 5px;
}
.b p{
  margin: 0;
  text-align: center;
  line-height: 40px;
  color:white;
  font-size: 18px;
}
</style>
